<template>
  <a-drawer v-model:visible="vdata.visible" :maskClosable="false" width="40%">
    <template #title>
      <div style="display:flex;justify-content:space-between;align-items:center;">
        <span v-if="vdata.isAdd">新增素材</span>
        <span v-else>修改素材</span>
      </div>
    </template>

    <a-form
      ref="formRef"
      :model="vdata.saveObject"
      layout="vertical"
      :rules="vdata.rules"
      :hideRequiredMark="true"
      :colon="false"
      labelAlign="left"
      :labelCol="{ span: 24 }"
      :wrapperCol="{ span: 24 }"
      style="margin-top: 30px; margin-left: 20px"
    >
      <a-row justify="space-between">
        <a-col :span="11">
          <a-form-item name="state">
            <template #label>
              <span style="margin-right: 10px;">素材类型</span>
              <a-tooltip placement="top">
                <question-circle-outlined />
                <template #title>
                  <span>临时素材有效期为3个月</span>
                </template>
              </a-tooltip>
            </template>
            <a-select v-model:value="vdata.saveObject.state" placeholder="请选择素材类型">
              <a-select-option :value="1" :disabled="vdata.saveObject.type === 'news'">临时性</a-select-option>
              <a-select-option :value="2">永久性</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item name="repMate" label="素材上传">
            <a-upload-dragger
              v-model:fileList="vdata.saveObject.fileList"
              :beforeUpload="()=>{return false}"
              :maxCount="1"
              :accept="vdata.accept"
            >
              <p class="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
              <p class="ant-upload-text">拖动到此处上传，或<a>点击上传</a></p>
              <p class="ant-upload-hint">每次只能上传一个文件，限制文件格式为 {{ vdata.accept }}</p>
            </a-upload-dragger>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right: 8px" @click="()=>{vdata.visible = false}">
        <close-outlined />
        取消
      </a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc">
        <check-outlined />
        保存
      </a-button>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
import {$apiOfficialMediaUploadMedia} from '@/api/proxy/officialManage/materialManage/index'
import { reactive, ref, defineExpose, getCurrentInstance } from 'vue'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const formRef = ref()

const props = defineProps(['callbackFunc'])

const vdata:any = reactive({
  visible: false,
  accept: '', // 上传文件类型
  saveObject: {
    repType: 'text',  // 回复消息类型
  },
  rules: {
    state: [{ required: true, message: '素材类型不能为空', trigger: 'blur' }],
  }
})

/**
 * 提交保存
 */
function handleOkFunc() {

  formRef.value.validate().then(()=>{
    if(!vdata.saveObject?.fileList){
      return $infoBox.message.warn('请上传素材')
    }
    vdata.btnLoading = true
    const formData = new FormData()
    Object.keys(vdata.saveObject).forEach(key => {
      if(key === 'fileList'){
        return formData.append('file',vdata.saveObject[key][0].originFileObj)
      }
      formData.append(key, vdata.saveObject[key])
    })
    
    $apiOfficialMediaUploadMedia(formData).then(() => {
      $infoBox.message.success('保存成功')
      props.callbackFunc()
      vdata.visible = false
    }).finally(()=>{
      vdata.btnLoading = false
    })
  }).catch(()=>{})
}
/**
 * 显示弹窗
 * @param type {string} 素材类型
 * @param appid {string} 公众号appId
 * @param mediaId {string} 素材id
 */
function show(type,appid,mediaId) {
  vdata.isAdd = !mediaId
  // 处理文件上传类型
  handleTypeChange(type)
  // 数据初始化
  vdata.saveObject = {
    type,
    appid
  }
  vdata.visible = true
}

/**
 * 根据不同的素材类型 调整文件类型
 */
function handleTypeChange(type) {
  if(type === 'image' || type === 'thumb' || type === 'news'){
    vdata.accept = 'image/*'
  }else if(type === 'voice'){
    vdata.accept = 'audio/*'
  }else if(type === 'video'){
    vdata.accept = 'video/*'
  }else{
    vdata.accept = '*/*'
  }
}

defineExpose({
  show,
})
</script>

<style lang="less" scoped>
:deep(.ant-upload-list-item-name){
  flex: initial !important;
}
</style>
